<template>
    <div class="certificate-item certificate-item-enterprise" v-if="item" :class="{ 'is-mobile': $isMobile }">
        <img :src="item.bg || defaultImg">
        <div class="special certificateNumber">{{ certificateNumber }}</div>
        <div class="special certificateTypeName">{{ certificateTypeName }}</div>

        <div class="special startYear">{{ startYear }}</div>
        <div class="special startMonth">{{ startMonth }}</div>
        <div class="special startDay">{{ startDay }}</div>

        <div class="special endYear">{{ endYear }}</div>
        <div class="special endMonth">{{ endMonth }}</div>
        <div class="special endDay">{{ endDay }}</div>

    </div>
</template>

<script>

const defaultImg = require("../enterprise.jpg");

export default {

    props: ["item"],

    data() {
        return {
            id: "",
            certificateNumber: "",
            certificateTypeName: "",
            startYear: "",
            startMonth: "",
            startDay: "",
            endYear: "",
            endMonth: "",
            endDay: "",
            defaultImg
        }
    },

    mounted() {
        this.init();
    },

    methods: {

        init() {
            let { certificateNumber, certificateTypeName, validityStartDate, validityEndDate } = this.item;


            if (validityStartDate) {
                const date = new Date(validityStartDate);
                this.startDay = date.getDay();
                this.startMonth = date.getMonth() + 1;
                this.startYear = date.getFullYear();
            }
            if (validityEndDate) {
                const date = new Date(validityStartDate);
                this.endDay = date.getDay();
                this.endMonth = date.getMonth() + 1;
                this.endYear = date.getFullYear();
            }


            this.certificateNumber = certificateNumber;
            this.certificateTypeName = certificateTypeName;

            if (this.$isMobile) {
                const certificateItem = document.querySelector('.certificate-item-enterprise.is-mobile');

                const viewportWidth = window.innerWidth;

                certificateItem.style.transform = `scale(${viewportWidth / 861})`;


            }



        }
    }

}

</script>

<style scoped lang="less">
.certificate-item-enterprise.is-mobile {
    transform-origin: top left;
}

.certificate-item-enterprise {
    position: relative;
    width: 861px;

    img {
        width: 100%;
        height: 100%;
    }
}

.special {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #1F1617;
    line-height: 19px;
    text-align: left;
    font-style: normal;
    position: absolute;
    font-weight: bolder;

}

.certificateNumber {
    left: 176px;
    bottom: 78px;

}

.certificateTypeName {
    top: 213px;
    left: 255px;
}

.startYear {
    left: 174px;
    bottom: 109px;
}

.startMonth {
    left: 226px;
    bottom: 109px;
}

.startDay {
    left: 259px;
    bottom: 109px;
}

.endYear {
    left: 299px;
    bottom: 109px;
}

.endMonth {
    left: 348px;
    bottom: 109px;
}


.endDay {
    left: 379px;
    bottom: 109px;
}
</style>